﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style>/*<![CDATA[*/

table{border: 1px solid gray;}
td{border: 1px dotted gray;}
p{margin: 3px 0 3px 0; padding: 0;}
#ID_Footer{font-size: small; font-style: italic; text-align: right; margin-top: 4em; padding-top: 4px; border-top: 2px solid gray;}

/*]]>*/</style><title>第16章 图像</title></head><body>
<div><div style="text-align: left;"><span class="Apple-style-span" style="font-family: 微软雅黑; font-size: 21px; "><br></span></div><div style="text-align: left;"><span class="Apple-style-span" style="font-family: 微软雅黑; "><font class="Apple-style-span" size="6"><b>第16章<span class="Apple-tab-span" style="white-space: pre; ">	</span>图像</b></font></span></div><span class="Apple-style-span" style="font-family: 微软雅黑; font-size: 21px; "><div><span class="Apple-style-span" style="font-family: 微软雅黑; font-size: 21px; "><br></span></div><div><span class="Apple-style-span" style="font-family: 微软雅黑; font-size: 21px; "><br></span></div><b>1. &nbsp; &nbsp; &nbsp; &nbsp;概念</b></span></div><div><span class="Apple-style-span" style="font-family: 微软雅黑; font-size: 21px; "><br></span></div>
<div><span class="Apple-style-span" style="font-family: 微软雅黑; font-size: 21px; "><b>&nbsp; &nbsp; &nbsp; &nbsp;</b></span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 165%">控制大小</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 165%"> (p398)</span></div>
<div><span class="Apple-style-span" style="font-family: 微软雅黑; font-size: 21px; "><b>&nbsp; &nbsp; &nbsp; &nbsp;</b></span><span style="font-family: 宋体; font-size: 12pt; line-height: 165%">设定通用名称</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 165%"> (p399)</span></div>
<div><span class="Apple-style-span" style="font-family: 微软雅黑; font-size: 21px; "><b>&nbsp; &nbsp; &nbsp; &nbsp;</b></span><span style="font-family: 宋体; font-size: 12pt; line-height: 165%">图像翻转与子画面，实现</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 165%"> (p406)</span></div>
<div><span style="font-family: 微软雅黑; font-size: 16pt; font-weight: bold; padding-left: 18pt"><br></span></div><div><span style="font-family: 微软雅黑; font-size: 16pt; font-weight: bold; padding-left: 18pt"><br></span></div><div><font class="Apple-style-span" face="微软雅黑"><b><span class="Apple-style-span" style="font-size: 21px;">2.<span class="Apple-tab-span" style="white-space: pre; ">	</span>&nbsp; &nbsp; &nbsp; &nbsp;属性</span><br></b></font></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; color: #7030a0; line-height: 150%"><br></span></div><div><span class="Apple-style-span" style="font-family: 微软雅黑; font-size: 21px; "><b>&nbsp; &nbsp; &nbsp; &nbsp;</b></span><span style="font-family: Times New Roman; font-size: 12pt; color: #7030a0; line-height: 150%">width</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 150%">, </span><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 150%">height</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 150%">属性</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 150%"> (p308)</span></div>
<div><span class="Apple-style-span" style="font-family: 微软雅黑; font-size: 21px; "><b>&nbsp; &nbsp; &nbsp; &nbsp;</b></span><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 165%">float</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 165%">属性，对齐图像</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 165%"> (p400)</span></div><div><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 165%"><br></span></div>
<div><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; line-height: 165%">居中</span></div>
<div><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 150%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">方法</span><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 150%">1</span><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">，包含元素</span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">text-align: "center"</span></div>
<div><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 150%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">方法</span><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 150%">2</span><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">，</span><span style="font-family: Times New Roman; font-size: 11pt; font-weight: bold; color: #7030a0; padding-left: 21pt; line-height: 150%">margin</span><span style="font-family: 华文楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">属性，左右值</span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">auto</span></div>
<div><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;方法</span><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 150%">3</span><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">，利用</span><span style="font-family: Times New Roman; font-size: 11pt; font-weight: bold; color: #7030a0; padding-left: 21pt; line-height: 150%">figure</span><span style="font-family: 华文楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">元素，指定图像大小，并对齐</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%"> (p401)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 165%"><br></span></div><div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 165%">background-image</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 165%">属性</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; line-height: 165%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: 宋体; font-size: 12pt; line-height: 165%">任何</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 165%">html</span><span style="font-family: 宋体; font-size: 12pt; line-height: 165%">元素后放置图像，默认自动重复并充满盒子</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; line-height: 165%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: 宋体; font-size: 12pt; line-height: 165%">值</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 165%">: </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 165%">url("someimage.jpg")</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 165%">;</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 165%"><br></span></div><div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 165%">background-repeat</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 165%">属性，重复图像。</span></div>
<div><span style="font-family: 楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">值：</span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">repeat, repeat-x, repeat-y, no-repeat</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%"> (p403)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 165%"><br></span></div><div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 165%">background-attachment</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 165%">属性，滚动页面时背景图像移动方式。</span></div>
<div><span style="font-family: 楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">值：</span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">fixed</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">, </span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">scroll</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%"> (p403)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 165%"><br></span></div><div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 165%">background-position</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 165%">属性，背景图像在浏览器窗口中的位置，一对值（水平</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 165%">-</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 165%">垂直）</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 165%">(p404)</span></div>
<div><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 150%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">left</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%"> </span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">top</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">, </span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">left</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%"> </span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">center</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">, </span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">left</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%"> </span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">bottom</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">, </span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">center</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%"> </span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">top</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">, </span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">center</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%"> </span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">center</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%"> ...</span></div>
<div><span style="font-family: 楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">指定一个值，则第一个值默认</span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">center</span></div>
<div><span style="font-family: 楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">可使用一对像素值</span><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 150%">(</span><span style="font-family: 楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">左上为原点，向右下取负值或看成向左上移动</span><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 150%">)</span><span style="font-family: 楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">，或者百分数</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 165%"><br></span></div><div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 165%">background</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 165%">属性</span></div>
<div><span style="font-family: 楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">按</span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">background-color</span><span style="font-family: 楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">、</span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">background-image</span><span style="font-family: 楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">、</span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">background-repeat</span><span style="font-family: 楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">、</span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">background-attachment</span><span style="font-family: 楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">、</span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">background-position</span><span style="font-family: 楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">顺序赋值，可省略某些属性。</span></div>
<div><span style="font-family: 楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">重复应用</span><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 150%">background</span><span style="font-family: 楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">简写</span><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 150%"> (CSS3, p405)</span></div><div><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 150%"><br></span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; line-height: 165%">CSS3</span><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; line-height: 165%">渐变，</span><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; line-height: 165%">background-image</span><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; line-height: 165%">属性，值中需指定两种颜色</span></div>
<div><span style="font-family: 宋体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">值：</span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">-moz-linear-gradient(#336666, #66cccc);</span></div>
<div><span style="font-family: 宋体; font-size: 11pt; padding-left: 21pt; line-height: 150%">或</span><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 150%"> </span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">-webkit-linear-gradient(#336666, #66cccc)</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">;</span></div>
<div><span style="font-family: 宋体; font-size: 11pt; padding-left: 21pt; line-height: 150%">或</span><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 150%"> </span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">-webkit-gradient(linear, 0% 0%, 0% 100%, from(#66cccc), to(#336666));</span></div>
<div><span style="font-family: 宋体; font-size: 11pt; padding-left: 21pt; line-height: 150%">或</span><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 150%"> </span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">-o-linear-gradient(#336666, #66cccc)</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">;</span></div>
<div><br></div>
<div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><script type="text/javascript" language="javascript" src="jquery.js"></script><script type="text/javascript" language="javascript" src="itemlink.js"></script></body></html>